<template>
  <div id="app">
    <h1 class="title"></h1>
    <div class="schedule">
      <el-table :data="tableData" border>
        <el-table-column label="时间" width="140px">
          <template v-slot="{ row }">
            {{ row.time }}
          </template>
        </el-table-column>
        <el-table-column v-for="(week, index) in days" :key="week" :label="week" width="0px">
          <template v-slot="{ row }">
            <span v-if="row.state[index] !== undefined">
              <template v-if="row.signText[index] === '签到'">
                <el-button @click="handleButtonClick(week, row, index)">{{ row.signText[index] }}</el-button>
              </template>
              <template v-else>
                <span :class="getLateTextStyle(row.state[index])">{{ row.signText[index] }}</span>
              </template>
            </span>
            <div v-else>无需签到</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as teacher from '@/api/edu/eduTeacher'
export default {
  data() {
    return {
      days: ['周一', '周二', '周三', '周四', '周五'],
      tableData: [
        { time: "7:40-8:00", section: '1', state: [], signText: [] },
        { time: "9:40-10:00", section: '3', state: [], signText: [] },
        { time: "13:10-13:30", section: '5', state: [], signText: [] },
        { time: "14:40-15:00", section: '7', state: [], signText: [] },
        { time: "16:40-17:00", section: '9', state: [], signText: [] },
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
       console.log(11)
      try {
        teacher.selectClass().then(response => {
          console.log(14)
          console.log("验证1::" + response.data)
          console.log("验证2::" + response.data.time)
          console.log("验证3::" + response)
          for (let i = 0; i < response.data.length; i++) {
            const section = response.data[i].section;
            const week = response.data[i].week;
            const tableDataItem = this.tableData.find((item) => item.section === section);
            if (tableDataItem) {
              const dayIndex = this.days.indexOf(week);
              tableDataItem.state[dayIndex] = response.data[i].status;
              tableDataItem.state.splice(dayIndex, 1, response.data[i].status);
              console.log("验证下哪个是需要签到的" + response.data[i].status)
              switch (response.data[i].status) {
                case '0':
                  tableDataItem.signText[dayIndex] = "签到";
                  break;
                case '1':
                  tableDataItem.signText[dayIndex] = "成功";
                  break;
                case '2':
                  tableDataItem.signText[dayIndex] = "迟到";
                  break;
                case '3':
                  tableDataItem.signText[dayIndex] = "旷";
                  break;
                case '4':
                  tableDataItem.signText[dayIndex] = "代签";
                  break;
              }
            }
          }
        })
        //这个地方是显示时间的
        // // const dataTime = await selectTime();
        teacher.selectTime().then(response => {
          console.log(response.data)
          for (let i = 0; i < dataTime.data.length; i++) {
            const section1 = dataTime.data[i].section;
            const tableDataTime = this.tableData.find((item) => item.section === section1);
            if (tableDataTime) {
              tableDataTime.time = `${dataTime.data[i].start}-${dataTime.data[i].middle}`;
            }
          }
        })

      } catch (error) {
        console.error(error);
      }
    },
    handleButtonClick(week, row, index) {
      console.log(`按钮点击：${week} 第${row.section}节课`);
      this.buttonLabel(week, row, index);
    },
    buttonLabel(week, row, index) {
      teacher.fetchScheduleData(week, row.section).then(response => {
        row.state[index] = '2';
        row.signText[index] = "迟到";
        row.state[index] = '1';
        row.signText[index] = "签到成功";
        row.state[index] = '3';
        row.signText[index] = "旷";
        location.assign(location.href);
        row.state[index] = '2';
        row.signText[index] = "代签";
        location.assign(location.href);
        this.$router.go(0)
      }).catch(error=>{
        this.$message.error(error.data.code);
      })
    },
    reload() {
      this.$forceUpdate()
    },
    getLateTextStyle(state) {
      return state === 2 ? 'late-text' : 'normal-text';
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
body {
  font-family: Arial, sans-serif;
  background-color: #746969;
  margin: 0;
  padding: 20px;
}
.el-table th,
.el-table td {
  text-align: center;
  vertical-align: middle;
}
.schedule {
  width:100%;
  height: 100%;
  margin: 0 auto;
  background-color: #778ee7;
  border-radius: 4px;
  padding: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.el-table th,
.el-table td {
  text-align: center;
  vertical-align: middle;
}
.btn {
  float: left;
  margin-left: 1000px;
  margin-top: -480px;
}
</style>
